<template>
		<view class="outcome" style="background-image: url('https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/zsafimg/bgimg.png');background-size: cover;background-repeat: no-repeat;">
		<view class="nav-style" @click="Flushed"
			:style="{'height':navHeight-15+'px','padding-top':15+'px','lineHeight':navHeight+'px','fontWeight':600,'fontSize':18+'px'}">
			初筛</view>
		<!-- <page-meta :page-style="pageStyle"></page-meta> -->
		<view class="microscope">
			<image src="/static/image/microscope.png" mode="aspectFit"></image>
		</view>
		<view class="content" :style="{'marginTop':navHeight+'px',}">
			<view class="top">
				<view class="detected">
					<image src="/static/image/detected.png" mode="aspectFit"></image>
				</view>
				<view class="num" @click="Search('')">{{total}}</view>
			</view>
			<view class="type">
				<view class="one" @click="Search(1)">
					<view class="num" style="color: #FF3737;">{{ reactive ? reactive : 0 }}</view>
					<view class="title">有反应(待复查)</view>
				</view>
				<view class="one" @click="Search(0)">
					<view class="num" style="color: #1FB373;">{{ noreactive ? noreactive : 0 }}</view>
					<view class="title">阴性</view>
				</view>
				<view class="one" @click="Search(3)">
					<view class="num" style="color: #222222;">{{ invalid ? invalid : 0 }}</view>
					<view class="title">检测未完成</view>
				</view>
				<view class="one" @click="Search(2)">
					<view class="num" style="color: #222222;">{{ wuxiao ? wuxiao : 0 }}</view>
					<view class="title">检测无效</view>
				</view>
			</view>
			<view style="color: #222222;font-size: 32rpx;font-weight: 500;margin: 30rpx 0;">检测结果</view>
			
			<view class="list">
				<view class="child" v-for="item,index in tableData" :key="index">
					<view class="top-box"
						:class="item.detectionresult=='1' ? 'bg1' : item.detectionresult=='0' ? 'bg2' : 'bg3'">
						<view style="display: flex;align-items: center;">
							<view class="pic">
								<image v-if="item.detectionresult == '1'" src="/static/image/reactive.png"
									mode="aspectFit"></image>
								<image v-if="item.detectionresult == '0'" src="/static/image/noreactive.png"
									mode="aspectFit"></image>
								<image v-if="item.detectionresult == '3'" src="/static/image/invalid.png"
									mode="aspectFit"></image>
									<image v-if="item.detectionresultdescription == '无效'" src="/static/image/invalid.png"
										mode="aspectFit"></image>
							</view>
							<view class="dev">{{item.deviceno}}</view>
						</view>
						<view class="detail" @click="detail(item)">查看详情</view>
					</view>
					<view class="middle-box">
						<view class="time"><text style="color: #555555;font-size: 24rpx;">检测时间:
							</text>{{item.detectiontime.slice(0,10)}}</view>
						<view class="address"><text style="color: #555555;font-size: 24rpx;">检测地点: </text>{{item.address}}</view>
					</view>
					<view class="bottom-box">
						<view class="res"
							:class="item.detectionresult=='1' ? 'bg4' : item.detectionresult=='0' ? 'bg5' : 'bg6'">
							{{item.detectionresultdescription}}
						</view>
						<view class="contact" :class="item.isneedcontactdescription=='是' ? 'bg7' : 'bg8'">
							{{item.isneedcontactdescription == '是' ? '同意提供帮助' : '不同意提供帮助'}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="show">暂无数据~</view>
		</view>

		<uni-popup ref="inputDialog" type="dialog">
			<view class="dialog">
				<image src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/zsafimg/bgimg.png" class="img" mode=""></image>
				<view class="content">
					<view class="title">
						查看详情
					</view>
					<view class="info">
						<uni-forms label-width="100px">
							<uni-forms-item label="设备编号:">{{Detail.deviceno}}</uni-forms-item>
							<uni-forms-item
								label="手机号:"> {{ (Detail.phone || '').substr(0, 3) + "****" + (Detail.phone || '').substr(7) }}</uni-forms-item>
							<uni-forms-item label="检测结果:">{{Detail.detectionresultdescription}}</uni-forms-item>
							<uni-forms-item label="检测地址:">{{Detail.address}}</uni-forms-item>
							<uni-forms-item label="检测时间:">{{Detail.detectiontime?.slice(0,10)}}</uni-forms-item>
							<uni-forms-item label="是否同意疾控中心跟您联系并提供帮助:">{{Detail.isneedcontactdescription}}</uni-forms-item>
							<uni-forms-item label="设备隶属:">{{Detail.subordinate}}</uni-forms-item>
							<uni-forms-item label="关联项目:">{{Detail.projectname}}</uni-forms-item>
						</uni-forms>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		FindLoginUser,
		getHomePage,
		getResultList,
		AESDecrypt
	} from '@/utils/api.js'
	import { decodeBase64MAC } from '@/utils/base64.js'
	export default {
		data() {
			return {
				statusBarHeight: '',
				navHeight: '',
				tableData: [],
				total: '',
				pages: '',
				loading: true, // 是否在加载
				noMore: false, // 有无更多数据
				lastLoadTime: 0, // 上次加载时间戳（用于节流）
				throttleDelay: 500, // 节流延迟时间(毫秒)
				reactive: '',
				noreactive: '',
				invalid: '',
				wuxiao: '',
				search: {
					DeviceNo: '',
					StartDate: '',
					EndDate: '',
					Province: '',
					City: '',
					County: '',
					Street: '',
					DetectionResult: '',
					IsNeedContact: '',
					Page: 1,
					Limit: 10,
					ProjectId: 0
				},
				Detail: {

				},
				show: false
			}
		},
		
		onReachBottom() {
			this.search.Page ++
			if(this.search.Page <= this.pages && this.loading==false){
				this.GetPrimaryList()
			}
		},
		onHide() {
			uni.hideLoading();
		},
		onShow() {
			this.Flushed()
		},
		onLoad() {
			// this.Flushed()
			//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
			uni.getSystemInfo({
				success: (e) => {
					// this.compareVersion(e.SDKVersion, '2.5.0')
					let statusBar = 0
					let customBar = 0

					// #ifdef MP
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					if (e.platform === 'android') {
						// this.$store.commit('SET_SYSTEM_IOSANDROID', false)
						customBar = e.statusBarHeight + 50
					}
					// #endif

					// #ifdef MP-WEIXIN
					statusBar = e.statusBarHeight
					// @ts-ignore
					const custom = wx.getMenuButtonBoundingClientRect()
					customBar = custom.bottom + custom.top - e.statusBarHeight
					// #endif

					// #ifdef APP-PLUS
					// console.log('app-plus', e)
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					// #endif

					// #ifdef H5
					statusBar = 0
					customBar = e.statusBarHeight + 45
					// #endif

					// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
					this.statusBarHeight = statusBar
					this.navHeight = customBar
				}
			})
		},
		methods: {
			getHomePage() {
				getHomePage(this.search).then((res) => {
					console.log('头部数据',res);
					if (res.code == 200) {
						this.total = res.data.total
						this.reactive = res.data.reactive
						this.noreactive = res.data.noreactive
						this.invalid = res.data.invalid
						this.wuxiao = res.data.wuxiao
					}
				})
			},
			GetPrimaryList() {
				console.log(this.search);
				uni.showLoading({
					title: '加载中',
				});
				if(this.search.DetectionResult === ''){
					this.getHomePage()
				}else{
					
				}
				
				getResultList(this.search).then((res) => {
					console.log(res);
					if (res.code == 200) {
						uni.hideLoading();
						this.loading = false // 没加载
						// this.total = res.total
						this.pages = Math.ceil( this.total / 10 ) // 总页数
						this.tableData =[...this.tableData,...res.data]
						console.log("初筛数据",this.tableData);
						if(this.tableData.length){
							
						}else{
							this.show = true
						}
					}
				})
				this.loading = true
			},
			Flushed() {
				this.getHomePage()
				this.GetPrimaryList()
			},
			Search(res) {
				this.search.Page = 1
				this.tableData = []
				this.search.DetectionResult = res
				this.GetPrimaryList()
			},
			detail(e) {
				console.log(e);
				this.Detail = e
				this.$refs.inputDialog.open('center')
			},
		},
	}
</script>

<style lang="scss" scoped>
	.outcome {
		width: 100%;
		height: 100vh;
		position: relative;
		// background-image: url('/static/image/bgimg.png');
		background-size: cover;
		background-repeat: no-repeat;

		.microscope {
			// z-index: 99;
			position: absolute;
			// top: 0;
			right: 0;
			width: 308rpx;
			height: 256rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.nav-style {
		background-image: url('https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/zsafimg/bgimg.png');
			background-size: cover;
			background-repeat: no-repeat;
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			z-index: 1000;
			display: flex;
			padding-left: 23rpx;
			align-items: center;
			justify-content: center;
		}

		.content {
			// z-index: 999;
			position: relative;
			padding: 0 30rpx;

			.top {
				padding-left: 10rpx;
				margin-top: 60rpx;

				.detected {
					width: 250rpx;
					height: 80rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.num {
					padding: 20rpx 0;
					font-weight: bold;
					font-size: 54rpx;
					background: linear-gradient(5.991944761053229e-7deg, #249383 0%, #1FC5AC 100%);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
					color: transparent;
					/* 备用 */
				}
			}

			.type {
				margin-top: 20rpx;
				z-index: 999;
				display: flex;
				justify-content: space-between;
				align-items: center;
				overflow: hidden;

				.one {
					text-align: center;
					box-sizing: border-box;
					width: 23%;
					height: 170rpx;
					// padding: 20rpx 0;
					background: linear-gradient(180deg, #E1F2FF 0%, #FFFFFF 100%);
					opacity: 0.7;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid;
					border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(220, 253, 255, 1)) 2 2;

					.num {
						font-weight: 500;
						font-size: 46rpx;
						margin-top: 20rpx;
					}

					.title {
						font-size: 26rpx;
						color: #555555;
						text-stroke: 2px #FFFFFF;
						margin-top: 14rpx;
					}
				}
			}

			.list {
				// overflow: scroll;
				border-radius: 12rpx;
				// padding-bottom: 60rpx;

				.child {
					border-radius: 12rpx;
					background-color: #faf9f9;
					padding-bottom: 12rpx;
					margin-bottom: 30rpx;

					.bg1 {
						background: linear-gradient(90deg, #FFE5E5 0%, #FFF8F8 100%);
					}

					.bg2 {
						background: linear-gradient(90deg, #D4F7E8 0%, #E8FFF5 100%);
					}

					.bg3 {
						background: linear-gradient(90deg, #E4ECF0 0%, #F2F7FA 100%);
					}

					.bg4 {
						color: #FF3737;
						background: #FFE5E5;
					}

					.bg5 {
						color: #1FB373;
						background: #C6FBE4;
					}

					.bg6 {
						color: #96A4AB;
						background: #E4EDF0;
					}

					.bg7 {
						background: #E1F2FF;
						color: #0090FF;
					}

					.bg8 {
						background: #E1F2FF;
						color: #4A6A83;
					}

					.top-box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 16rpx 24rpx;
						border-radius: 12rpx 12rpx 0 0;

						.pic {
							width: 40rpx;
							height: 40rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.dev {
							margin-left: 20rpx;
							font-weight: 500;
							font-size: 27rpx;
							color: #222222;
						}

						.detail {
							background: #FFFFFF;
							border-radius: 19rpx 19rpx 19rpx 19rpx;
							padding: 6rpx 16rpx;
							font-weight: 400;
							font-size: 19rpx;
							color: #FF3737;
						}
					}

					.middle-box {
						margin-left: 24rpx;

						.time,
						.address {
							line-height: 40rpx;
							margin-top: 16rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #555555;
						}

					}

					.bottom-box {
						margin: 27rpx 0 27rpx 24rpx;
						display: flex;

						.res,
						.contact {
							// background: #FFFFFF;
							border-radius: 19rpx;
							padding: 6rpx 16rpx;
							font-weight: 400;
							font-size: 19rpx;
							border-radius: 8rpx;
							margin-right: 15rpx;
						}
					}
				}
			}
		}

		.dialog {
			// width: 90%;
			width: 600rpx;
			height: 1000rpx;
			position: relative;
			border-radius: 5px;
			z-index: 99999;

			.img {
				width: 100%;
				height: 1000rpx;
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 10px;
				z-index: -1;
			}

			.content {
				padding: 30rpx 20rpx;
				z-index: 99;

				.title {
					width: 300rpx;
					margin: 0 auto;
					text-align: center;
					font-size: 18px;
					font-weight: 600;
				}

				.info {
					margin-top: 30rpx;
					padding: 20rpx;
					width: 520rpx;
					height: 800rpx;
					overflow-y: scroll;
					background-color: #fff;
					opacity: 0.7;
					border-radius: 10px;
				}
			}

		}

		.uni-forms-item {
			display: flex;
			align-items: center;
		}
	}
</style>